<template>
     <div id="main">
        <div class="sku-box store-content">
            <div class="sort-option">
                <ul class="line clear">
                    <li><a href="javascript:;" :class="{'active':index1==id}" @click="comSort">综合排序</a></li>
                    <li><a href="javascript:;" :class="{'active':index2==id}" @click="volumeSort">销量排序</a></li>
                    <li><a href="javascript:;" :class="{'active':index3==id}" @click="priceSort">价格高到低</a></li>
                    <li><a href="javascript:;" :class="{'active':index4==id}" @click="gpriceSort">价格低到高</a></li>
                </ul>
            </div>
            <div class="gray-box">
                <div class="item-box">
                    <Goods v-for="(item,index) in list" :key='item.id' :goods="item"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios"
import Goods from '../components/Goods.vue'
    export default {
        components: {
            Goods
        },
        data() {
            return {
                list:[],
                newList:[],
                 id:0,
                index1:0,
                index2:1,
                index3:2,
                index4:3,
            }
        },
        created(){
            this.$http.get("http://localhost:3000/list").then(res=>{
                this.list=res.data
            })
        },
      methods:{
        //价格高到低
        priceSort(){
          this.list=this.list.sort((a, b)=>{
              return b.price-a.price
            })
          this.id=2;
        },
        //价格低到高
        gpriceSort(){
          this.list=this.list.sort((a, b)=>{
            return a.price-b.price
          })
          this.id=3;
        },
      // 销量排序
        volumeSort(){
          this.list=this.list.sort((a, b)=>{
            return b.volume-a.volume
          });
          this.id=1;
        },
      // 综合排序
        comSort(){
          this.$http.get("http://localhost:3000/list").then(res=>{
            this.list=res.data
          })
            this.id=0;
        }
      }
    }
</script>

<style lang="less" scoped>
@import url('../assets/css/goodsList.css');
</style>